<template>
  <div class="subpage">
    <div class="banner"></div>
    <div style="width: 100%; min-height: 90px">
      <div class="nav-content">
        <div class="subject">
          <div id="nav">
            <a @click="selectSubject(null)" :class="selectId === 0 ? 'on' : ''">全部</a>
            <a v-for="subject in studentSubjectList"
              :key="subject.id"
              :class="subject.id === selectId ? 'on' : ''"
              @click="selectSubject(subject)" >{{subject.name}}</a>
          </div>
        </div>
      </div>
    </div>
    <el-divider content-position="left"></el-divider>
    <div class="subbox">
      <ul class="clearfix" >
        <li class="typeitem" >
          <img src="/static/image/noData.jpg" class="image">
          <p style="color: black; font-weight: bold">sdsdsd</p>
          <div style="margin-top: 5px;line-height:35px;">
            <i class="el-icon-user-solid">100人</i>
            <el-button style="float: right"  type="text">开始练习</el-button>
          </div>
        </li>
        <li class="typeitem" >
          <img src="/static/image/noData.jpg" class="image">
          <p style="color: black; font-weight: bold">sdsdsd</p>
          <div style="margin-top: 5px;line-height:35px;">
            <i class="el-icon-user-solid">100人</i>
            <el-button style="float: right"  type="text">开始练习</el-button>
          </div>
        </li>
        <li class="typeitem" >
          <img src="/static/image/noData.jpg" class="image">
          <p style="color: black; font-weight: bold">sdsdsd</p>
          <div style="margin-top: 5px;line-height:35px;">
            <i class="el-icon-user-solid">100人</i>
            <el-button style="float: right"  type="text">开始练习</el-button>
          </div>
        </li>
        <li class="typeitem" >
          <img src="/static/image/noData.jpg" class="image">
          <p style="color: black; font-weight: bold">sdsdsd</p>
          <div style="margin-top: 5px;line-height:35px;">
            <i class="el-icon-user-solid">100人</i>
            <el-button style="float: right"  type="text">开始练习</el-button>
          </div>
        </li>
        <li class="typeitem" >
          <img src="/static/image/noData.jpg" class="image">
          <p style="color: black; font-weight: bold">sdsdsd</p>
          <div style="margin-top: 5px;line-height:35px;">
            <i class="el-icon-user-solid">100人</i>
            <el-button style="float: right"  type="text">开始练习</el-button>
          </div>
        </li> <li class="typeitem" >
        <img src="/static/image/noData.jpg" class="image">
        <p style="color: black; font-weight: bold">sdsdsd</p>
        <div style="margin-top: 5px;line-height:35px;">
          <i class="el-icon-user-solid">100人</i>
          <el-button style="float: right"  type="text">开始练习</el-button>
        </div>
      </li> <li class="typeitem" >
        <img src="/static/image/noData.jpg" class="image">
        <p style="color: black; font-weight: bold">sdsdsd</p>
        <div style="margin-top: 5px;line-height:35px;">
          <i class="el-icon-user-solid">100人</i>
          <el-button style="float: right"  type="text">开始练习</el-button>
        </div>
      </li> <li class="typeitem" >
        <img src="/static/image/noData.jpg" class="image">
        <p style="color: black; font-weight: bold">sdsdsd</p>
        <div style="margin-top: 5px;line-height:35px;">
          <i class="el-icon-user-solid">100人</i>
          <el-button style="float: right"  type="text">开始练习</el-button>
        </div>
      </li> <li class="typeitem" >
        <img src="/static/image/noData.jpg" class="image">
        <p style="color: black; font-weight: bold">sdsdsd</p>
        <div style="margin-top: 5px;line-height:35px;">
          <i class="el-icon-user-solid">100人</i>
          <el-button style="float: right"  type="text">开始练习</el-button>
        </div>
      </li> <li class="typeitem" >
        <img src="/static/image/noData.jpg" class="image">
        <p style="color: black; font-weight: bold">sdsdsd</p>
        <div style="margin-top: 5px;line-height:35px;">
          <i class="el-icon-user-solid">100人</i>
          <el-button style="float: right"  type="text">开始练习</el-button>
        </div>
      </li>





      </ul>
      <!--<div class="page" v-if="hasModeData">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="totalCount">
        </el-pagination>
      </div>

      <div v-else class="boxno" style="width:100%;height:100%;display: flex;align-items: center;justify-content: center;">
        <img src="/static/image/noData.jpg" alt="" style="display: block">
      </div>-->
    </div>
   <!-- <div class="course-content">
      <div class="subbox">
        <ul class="clearfix" v-if="hasModeData">
          <li class="typeitem" v-for="(mode,index) in modeList" :key="index">
            <img :src="fileUrl + mode.head_img" class="image">
            <p style="color: black; font-weight: bold">{{mode.name}}</p>
            <div style="margin-top: 5px;line-height:35px;">
              <i class="el-icon-user-solid">{{mode.study_number}}人</i>
              <el-button style="float: right" @click="goModeDetail(mode)" type="text">开始练习</el-button>
            </div>
          </li>
        </ul>
        <div class="page" v-if="hasModeData">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next, jumper"
            :total="totalCount">
          </el-pagination>
        </div>

        <div v-else class="boxno" style="width:100%;height:100%;display: flex;align-items: center;justify-content: center;">
          <img src="/static/image/noData.jpg" alt="" style="display: block">
        </div>
      </div>
    </div>-->
  </div>
</template>

<script>
  import studentSubject from '@/components/student-subject'
  let that = null
  export default {
    name: 'course',
    components: {studentSubject},
    data () {
      return {
        userInfo: {},
        modeType: '',
        selectId: 0,
        fileHost: this.$store.getters.fileHost,
        studentSubjectList: []
      }
    },

    beforeCreate () {
      that = this
    },

    mounted () {
      this.modeType = this.$route.query.modeType
      this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
      this.getStudentSubjectList()
    },

    methods: {

      selectSubject (subject) {
          if (subject) {
              this.selectId = subject.id
          } else {
              this.selectId = 0
          }
      },

      // 获取学员学习科目
      getStudentSubjectList () {
          this.axios.get(that.$httpApi.httpUrl('/student/subject/getSubjectByGradeType'), {
              params: {

              }
          }).then(response => {
              this.studentSubjectList = response.data.data
          })
      },

      goView (val) {
        this.$router.push({
          name: 'courseList',
          query: {
            subjectId: val.id
          }
        })
      },
    }
  }
</script>
<style lang='scss' scoped>
  .subpage {
    background: #f8fafc;
    .banner {
      width: 100%;
      height: 360px;
      background: url('/static/image/bannerpic.png') no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
  }

  .nav-content {
    width: 1200px;
    min-height: 40px;
    margin: 20px auto;
    background: #f8fafc;
    position: relative;
    top: 10%;
  }

  .nav-content a {
    font-size: 15px;
    line-height: 40px;
    min-width: 60px;
    padding: 0 15px;
    margin-top: 10px;
    margin-right: 25px;
    float: left;
  }

  .nav-content a:hover {
    cursor: pointer;
    background: rgba(204,136,0,.1);
    color: #c80;
  }

  .course-content {
    width: 1200px;
    min-height: 500px;
    background: blue;
    margin: 20px auto;
  }

  .nav-content .on {
    background: rgba(204,136,0,.1);
    color: #c80;
  }


  .subbox ul {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
  }
  .subbox{
    width: 1200px;
    min-width: 500px;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    .page {
      position: absolute;
      left: 0;
      bottom: 10px;
      width: 100%;
      text-align: center;
    }
  }

  .subbox li {
    box-sizing: border-box;
    width: 192px;
    min-height: 160px;
    float: left;
    margin-right: 40px;
    margin-bottom: 30px;
    text-align: left;
    &:hover{
      opacity: 0.7;
      .course_title{
        color:#ca0000;

      }
    }
    img{
      width: 100%;
      height:108px;
      display: block;
      border-radius: 8px;
    }
    .course_title{line-height: 36px;font-weight: 500;color:#000000;font-size: 18px;
      padding: 0 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box; // 作为弹性伸缩盒子模型显示。
      -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp: 2; // 显示的行
    }
  }


</style>
